<template>
	<view v-if="show">
		<up-popup :show="true" @close="show = false" closeable :round="15">
			<view class="content" v-if="pageData.length">
				<text class="title">请选择办理套餐：</text>
				<view
					class="list"
					:class="{ active: index == current }"
					v-for="(item, index) in pageData"
					@click="current = index"
					:key="index">
					<text class="Name">{{ item.name }}</text>
					<text class="price">¥{{ item.firstPrice ? item.firstPrice : item.price }}</text>
				</view>
				<view class="PriceTip">{{ pageData[current].memberTypeTitle }}</view>
				<view class="Bot" @click="Transact">办理</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import { Back, staticImg, toUrl, Toast } from '@/utils/utils.js';
	import { defineEmits, computed, ref, watch, nextTick, onUnmounted } from 'vue';
	import { useMainStore } from '@/stores/index';
	import Http from '@/utils/request.js';

	const mainStore = useMainStore();
	const props = defineProps(['mealData']);
	const show = ref(false);
	const pageData = ref([]);
	const current = ref(0);
	const membertypes = () => {
		Http.get({
			url: '/api/member/membertypes',
		}).then((res) => {
			if (res.code != 0) return Toast(res.msg);
			const result = res.data || [];
			pageData.value = result;
			show.value = true;
		});
	};

	const Transact = () => {
		Http.post({
			url: `/pay/buyMember?memberId=${pageData.value[current.value].id}`,
		}).then((res) => {
			if (res.code != 0) return Toast(res.msg);
			const Result = res.data;
			if (Result.extraData) {
				wx.openEmbeddedMiniProgram({
					appId: Result.appId,
					extraData: Result.extraData,
				});
			}
		});
	};
	watch(
		() => props.mealData && props.mealData.type && props.mealData.type == '608',
		(newVal, oldVal) => {
			console.log(newVal, 'newVal');
			if (newVal) {
				membertypes();
			} else {
				show.value = false;
			}
		},
		{
			deep: true,
		}
	);
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		padding: 60rpx 24rpx 24rpx 24rpx;
		display: flex;
		flex-direction: column;
		.title {
			color: #000;
			font-size: 30rpx;
		}
		.list {
			width: 100%;
			height: 92rpx;
			border-radius: 20rpx;
			padding: 0 40rpx;
			background-color: #f7f7f7;
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			color: #000;
			font-size: 32rpx;
			.Name {
				flex: 1;
			}
			.price {
				font-size: 34rpx;
			}
		}
		.active {
			background-color: #feb048;
			color: #fff;
		}
		.Bot {
			width: 100%;
			height: 92rpx;
			background-color: $color_008;
			color: #fff;
			font-size: 32rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 20rpx;
			margin-top: 30rpx;
		}
		.PriceTip {
			min-height: 60rpx;
			color: #999;
			font-size: 24rpx;
			padding-top: 20rpx;
		}
	}
</style>
